<script>

  function loadRoots() {
    $.ajax(
        {
          url: '?listGen&act=lsr',
          type: 'post',
          data: {sectionId: $('#sectionId').val()}
        }
    ).done(function (response) {
          $("#listRoots").html(response);
          $("#rootTitle").show();
          $('#listRoot').on('change', function () {
            loadSubs();
          });
        })
  }

  function loadSubs() {
    $.ajax(
        {
          url: '?listGen&act=lss',
          type: 'post',
          data: {listRoot: $('#listRoot').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#subRoots").html(response);
          $("#subRoots").show();
          $('#listSub').on('change', loadProductForm());
          $('#loading').hide();
        })
  }

  function loadProductForm() {
    $.ajax(
        {
          url: '?prFormGen',
          type: 'post',
          data: {listRootId: $('#listRoot').val(), sectionId: $('#sectionId').val(), subElemId: $('#listSub').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#productFormDiv").html(response);
          $('#productForm').show();
          $('#loading').hide();
        })
  }

  function submitSubForm() {
    if (!($('subTitleInput').val() == "")) {
      $('#addSubForm').submit();
    }
  }
</script>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/22/14
 * Time: 10:48 PM
 */


$result = getMainCategories();

$output = "<select id='sectionId' name='sectionId' onchange='loadRoots()'>";

$output .= "<option style='text-align: center'>-- Выберите вариант из списка --</option>";

while ($row = mysql_fetch_assoc($result)) {
  $output .= "<option value='" . $row['ID'] . "'>" . $row['TITLE'] . "</option>";
}

$output .= "</select>";

?>

<div class="step">
  <div class="stepInfo">
    1. Выберите категорию, в которой находится корневой элемент списка:
  </div>
  <div class="stepSelect"><?= $output ?></div>
</div>
<div class="step" id="rootTitle">
  <div class="stepInfo">
    2. Выберите корневой элемент списка, в который Вы хотите добавить новый элемент второго уровня:
  </div>
  <div class="stepSelect">
    <div id="listRoots">
    </div>
  </div>
</div>
<div class="step" id="subTitle">
  <div class="stepInfo">
    3. Выберите элемент списка второго уровня, в который Вы хотите добавить продукцию:
  </div>
  <div class="stepSelect">
    <div id="subRoots">
    </div>
  </div>
</div>
<div class="step" id="productForm">
  <div class="stepInfo">
    4. Форма для добавления продуктов в выбранную категорию:
  </div>
  <div class="stepSelect">
    <div id="productFormDiv">
    </div>
  </div>
</div>
